<template>
  <div class="header">
    <el-row :gutter="10">
      <el-col :span="6">
        <TodaySale></TodaySale>
      </el-col>
      <el-col :span="6">
        <TodayOrder></TodayOrder>
      </el-col>
      <el-col :span="6">
        <TodayUser></TodayUser>
      </el-col>
      <el-col :span="6">
        <TotalUser></TotalUser>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TodaySale from './components/TodaySale.vue'
import TodayOrder from './components/TodayOrder.vue';
import TodayUser from './components/TodayUser.vue';
import TotalUser from './components/TotalUser.vue';
export default {
  name: "Header",
  components:{
    TodaySale,
    TodayOrder,
    TodayUser,
    TotalUser
  }
};
</script>

<style lang="scss" >
.header{
  .emphasis {
    // margin: 0 5px;
    font-size: 12px;
    font-weight: 700;
    color:#666;
  }
  .add {
    width: 0;
    height: 0;
    border-width: 4px;
    border-color: transparent transparent green transparent;
    border-style: solid;
  }
  .reduce {
    width: 0;
    height: 0;
    border-width: 4px;
    border-color: red transparent transparent transparent;
    border-style: solid;
  }
}
</style>
